import React, { useEffect } from 'react';

interface Props {
  title?: string;
  text: string;
  confirmText?: string;
  onClose: () => void;
}

export default function WrongDialog({ title = '温馨提示', text, confirmText = '确认', onClose }: Props) {
  useEffect(() => {
    window.document.body.style.overflow = 'hidden';
  }, []);

  function handleClose() {
    window.document.body.style.overflow = '';
    onClose();
  }
  return (
    <div className="wrong-dialog d-flex-r ai-center jc-center">
      <div className="wrong-mask" />
      <div className="bw-100 wrong-center" onClick={() => {}}>
        <div className="wrong-title-block">
          <div className="flex-1 d-flex-r ai-center jc-center pt-20">
            <img className="w-30 mr-10" src="./pic/icon_cancel.png" alt="" />

            <span className="font-size-14 font-widget-600">{title}</span>
          </div>
          <div className="wrong-close" onClick={handleClose}>
            <img alt="" className="close-icon" src={closeIcon} />
          </div>
        </div>
        <div className="wrong-content d-flex-c ai-center jc-center">
          <div className="flex-1 bw-100 d-flex-c ai-center jc-center">
            <div className="flex-1 d-flex-r ai-center jc-center">{text}</div>
            <div className="mb-5 font-size-12 text-color-9">如果对提单结果有疑问，可联系客服解决</div>
          </div>
          <div className="bw-100 h-40 border-top d-flex-r ai-center jc-center text-color-p" onClick={handleClose}>
            {confirmText}
          </div>
        </div>
      </div>
    </div>
  );
}

let closeIcon =
  '';
